<!-- 13集样式 -->
<script setup>
import {ref, reactive, onMounted, defineProps} from "vue"

const arrayNum = reactive([1,2,3,4,5,6,7,8,9,10,11,12,13])
const num = ref(0)
const videoUrl = ref("")

const videoTimeAll = ref(0)
const videoTimeNow = ref(0)

const videowucha = 530

const dialogMiniJiBoxRef = ref(null)
const videoMaster = ref(null)

//导航栏番剧选择
const dialogMiniJi1ImageRef = ref(null)
const dialogMiniJi2ImageRef = ref(null)
const dialogMiniJi3ImageRef = ref(null)
const dialogMiniJi4ImageRef = ref(null)
const dialogMiniJi5ImageRef = ref(null)
const dialogMiniJi6ImageRef = ref(null)
const dialogMiniJi7ImageRef = ref(null)
const dialogMiniJi8ImageRef = ref(null)
const dialogMiniJi9ImageRef = ref(null)
const dialogMiniJi10ImageRef = ref(null)
const dialogMiniJi11ImageRef = ref(null)
const dialogMiniJi12ImageRef = ref(null)
const dialogMiniJi13ImageRef = ref(null)

//视频功能键
const playBtnImageRef = ref(null)
const pressBoxRef = ref(null)
const proessRef = ref(null)


const isFirst = ref(true)

onMounted(()=>{
    videoUrl.value = props.fan1VideoUrl

    dialogMiniJi1ImageRef.value.style.border = "2px solid red"
    dialogMiniJi2ImageRef.value.style.border = "2px solid #fff"
    dialogMiniJi3ImageRef.value.style.border = "2px solid #fff"
    dialogMiniJi4ImageRef.value.style.border = "2px solid #fff"
    dialogMiniJi5ImageRef.value.style.border = "2px solid #fff"
    dialogMiniJi6ImageRef.value.style.border = "2px solid #fff"
    dialogMiniJi7ImageRef.value.style.border = "2px solid #fff"
    dialogMiniJi8ImageRef.value.style.border = "2px solid #fff"
    dialogMiniJi9ImageRef.value.style.border = "2px solid #fff"
    dialogMiniJi10ImageRef.value.style.border = "2px solid #fff"
    dialogMiniJi11ImageRef.value.style.border = "2px solid #fff"
    dialogMiniJi12ImageRef.value.style.border = "2px solid #fff"
    dialogMiniJi13ImageRef.value.style.border = "2px solid #fff"
})

const props = defineProps({
    backImage:{type:String},

    fan1ImageUrl:{type:String},
    fan2ImageUrl:{type:String},
    fan3ImageUrl:{type:String},
    fan4ImageUrl:{type:String},
    fan5ImageUrl:{type:String},
    fan6ImageUrl:{type:String},
    fan7ImageUrl:{type:String},
    fan8ImageUrl:{type:String},
    fan9ImageUrl:{type:String},
    fan10ImageUrl:{type:String},
    fan11ImageUrl:{type:String},
    fan12ImageUrl:{type:String},
    fan13ImageUrl:{type:String},

    fan1VideoUrl:{type:String},
    fan2VideoUrl:{type:String},
    fan3VideoUrl:{type:String},
    fan4VideoUrl:{type:String},
    fan5VideoUrl:{type:String},
    fan6VideoUrl:{type:String},
    fan7VideoUrl:{type:String},
    fan8VideoUrl:{type:String},
    fan9VideoUrl:{type:String},
    fan10VideoUrl:{type:String},
    fan11VideoUrl:{type:String},
    fan12VideoUrl:{type:String},
    fan13VideoUrl:{type:String},
})

//番剧选择 - 左箭头
const leftBtn = () => {
    if(num.value < 0){
        num.value = 0
    }
    num.value--
    switch(num.value){
        case 1:
            dialogMiniJiBoxRef.value.style.transform = "translateX(-30%)"
            break 
        case 2:
            dialogMiniJiBoxRef.value.style.transform = "translateX(-50%)"
            break
        case 3:
            dialogMiniJiBoxRef.value.style.transform = "translateX(-68%)"
            break
        default:
            dialogMiniJiBoxRef.value.style.transform = "translateX(0)"
            break
    }
}
//番剧选择 - 右箭头
const rightBtn = () => {
    if(num.value > 2){
        num.value = 0
    }
    num.value++
    switch(num.value){
        case 1:
            dialogMiniJiBoxRef.value.style.transform = "translateX(-30%)"
            break 
        case 2:
            dialogMiniJiBoxRef.value.style.transform = "translateX(-50%)"
            break
        case 3:
            dialogMiniJiBoxRef.value.style.transform = "translateX(-68%)"
            break
        default:
            dialogMiniJiBoxRef.value.style.transform = "translateX(0)"
            break
    }
}

//视频播放
const player = () => {
    if(videoMaster.value.paused){
        videoMaster.value.play()
        playBtnImageRef.value.src = "../../public/video/pause_white.svg"
    }else{
        videoMaster.value.pause()
        playBtnImageRef.value.src = "../../public/video/play_white.svg"
    }
}

//番剧切换
const playerFan = (num) => {
    switch(num){
        case 1:
            isFirst.value = false
            dialogMiniJi1ImageRef.value.style.border = "2px solid red"
            dialogMiniJi2ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi3ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi4ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi5ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi6ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi7ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi8ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi9ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi10ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi11ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi12ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi13ImageRef.value.style.border = "2px solid #fff"
            videoUrl.value = props.fan1VideoUrl
            break
        case 2:
            isFirst.value = false
            dialogMiniJi1ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi2ImageRef.value.style.border = "2px solid red"
            dialogMiniJi3ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi4ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi5ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi6ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi7ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi8ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi9ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi10ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi11ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi12ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi13ImageRef.value.style.border = "2px solid #fff"
            videoUrl.value = props.fan2VideoUrl
            break
        case 3:
            isFirst.value = false
            dialogMiniJi1ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi2ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi3ImageRef.value.style.border = "2px solid red"
            dialogMiniJi4ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi5ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi6ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi7ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi8ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi9ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi10ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi11ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi12ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi13ImageRef.value.style.border = "2px solid #fff"
            videoUrl.value = props.fan3VideoUrl
            break
        case 4:
            isFirst.value = false
            dialogMiniJi1ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi2ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi3ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi4ImageRef.value.style.border = "2px solid red"
            dialogMiniJi5ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi6ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi7ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi8ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi9ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi10ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi11ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi12ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi13ImageRef.value.style.border = "2px solid #fff"
            videoUrl.value = props.fan4VideoUrl
            break
        case 5:
            isFirst.value = false
            dialogMiniJi1ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi2ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi3ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi4ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi5ImageRef.value.style.border = "2px solid red"
            dialogMiniJi6ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi7ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi8ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi9ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi10ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi11ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi12ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi13ImageRef.value.style.border = "2px solid #fff"
            videoUrl.value = props.fan5VideoUrl
            break
        case 6:
            isFirst.value = false
            dialogMiniJi1ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi2ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi3ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi4ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi5ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi6ImageRef.value.style.border = "2px solid red"
            dialogMiniJi7ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi8ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi9ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi10ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi11ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi12ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi13ImageRef.value.style.border = "2px solid #fff"
            videoUrl.value = props.fan6VideoUrl
            break
        case 7:
            isFirst.value = false
            dialogMiniJi1ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi2ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi3ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi4ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi5ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi6ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi7ImageRef.value.style.border = "2px solid red"
            dialogMiniJi8ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi9ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi10ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi11ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi12ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi13ImageRef.value.style.border = "2px solid #fff"
            videoUrl.value = props.fan7VideoUrl
            break
        case 8:
            isFirst.value = false
            dialogMiniJi1ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi2ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi3ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi4ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi5ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi6ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi7ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi8ImageRef.value.style.border = "2px solid red"
            dialogMiniJi9ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi10ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi11ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi12ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi13ImageRef.value.style.border = "2px solid #fff"
            videoUrl.value = props.fan8VideoUrl
            break
        case 9:
            isFirst.value = false
            dialogMiniJi1ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi2ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi3ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi4ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi5ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi6ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi7ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi8ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi9ImageRef.value.style.border = "2px solid red"
            dialogMiniJi10ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi11ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi12ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi13ImageRef.value.style.border = "2px solid #fff"
            videoUrl.value = props.fan9VideoUrl
            break
        case 10:
            isFirst.value = false
            dialogMiniJi1ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi2ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi3ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi4ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi5ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi6ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi7ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi8ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi9ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi10ImageRef.value.style.border = "2px solid red"
            dialogMiniJi11ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi12ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi13ImageRef.value.style.border = "2px solid #fff"
            videoUrl.value = props.fan10VideoUrl
            break
        case 11:
            isFirst.value = false
            dialogMiniJi1ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi2ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi3ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi4ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi5ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi6ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi7ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi8ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi9ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi10ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi11ImageRef.value.style.border = "2px solid red"
            dialogMiniJi12ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi13ImageRef.value.style.border = "2px solid #fff"
            videoUrl.value = props.fan11VideoUrl
            break
        case 12:
            isFirst.value = false
            dialogMiniJi1ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi2ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi3ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi4ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi5ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi6ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi7ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi8ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi9ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi10ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi11ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi12ImageRef.value.style.border = "2px solid red"
            dialogMiniJi13ImageRef.value.style.border = "2px solid #fff"
            videoUrl.value = props.fan12VideoUrl
            break
        case 13:
            isFirst.value = false
            dialogMiniJi1ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi2ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi3ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi4ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi5ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi6ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi7ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi8ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi9ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi10ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi11ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi12ImageRef.value.style.border = "2px solid #fff"
            dialogMiniJi13ImageRef.value.style.border = "2px solid red"
            videoUrl.value = props.fan13VideoUrl
            break
    }
}

//视频时间计算
const TimeJiSuan = (time) => {
    let h,m,s
    if(time >= 60*60*60){
        h = time / 60 / 60^0 //^0:四舍五入整数化
        m = time / 60 % 60^0
        s = time % 60 % 60^0
        return h + ':' + m + ':' + s
    }else if(time >= 0 && time <60*60*60){
        m = time / 60 % 60^0
        s = time % 60 % 60^0
        return m + ':' + s
    }else{
        return "出错了"
    }
}

const videoCanPlay = () => {
    // videoTimeNow.value = TimeJiSuan(0)
    videoTimeAll.value = TimeJiSuan(videoMaster.value.duration)
    playBtnImageRef.value.src = "../../public/video/pause_white.svg"
}

//视频更新
const videoTimeUpdate = async() => {
    // console.log(proessRef.value)
    videoTimeNow.value = TimeJiSuan(videoMaster.value.currentTime)
    proessRef.value.style.width = await videoMaster.value.currentTime/videoMaster.value.duration*100 + '%'
}
const videoMouseDown = (event) => {
    // console.log(event.pageX)
    let len = event.pageX - pressBoxRef.value.offsetLeft - videowucha
    let percent = len / pressBoxRef.value.offsetWidth;
    proessRef.value.style.width = percent * (pressBoxRef.value.offsetWidth) - 2 + "px";
    videoMaster.value.currentTime = percent * videoMaster.value.duration;
}
const videoPlaying = () => {}

</script>

<template>
    <div class="animeModel4All">
        <img :src="props.backImage" alt="">
        <div class="videoMasterBox">
            <div class="videoMasterBox1">
                <div class="videoMasterBox2">
                    <div class="videoMaster" @click="player">
                        <video :src="props.fan1VideoUrl" ref="videoMaster" v-if="isFirst" autoplay
                            @timeupdate="videoTimeUpdate()" @keyup="videoKeyUp" @mousemove="videoMouseMove"
                            @canplay="videoCanPlay()" @playing="videoPlaying()"></video>
                        <video :src="videoUrl" ref="videoMaster" v-else autoplay
                            @timeupdate="videoTimeUpdate()" @keyup="videoKeyUp" @mousemove="videoMouseMove"
                            @canplay="videoCanPlay()" @playing="videoPlaying()"></video>
                    </div>
                </div>
                <div class="videoMasterBox3">
                    <div class="dialogMiniBox">
                        <div class="dialogLeft"><img src="../../public/icons/leftPoint.svg" alt="left" @click="leftBtn"/></div>
                        <div class="dialogMaster">
                            <div class="dialogMiniJiBox" ref="dialogMiniJiBoxRef">
                                <!-- <div class="dialogMiniJiImageBox" v-for="i in arrayNum" :key="i" >
                                    <div class="dialogMiniJiImage">
                                        <img :src="props.fan1ImageUrl" alt="" />
                                    </div>
                                </div> -->
                                <div class="dialogMiniJiImageBox">
                                    <div class="dialogMiniJiImage" ref="dialogMiniJi1ImageRef" @click="playerFan(1)">
                                        <img :src="props.fan1ImageUrl" alt="" />
                                    </div>
                                    <div class="dialogMiniJiImage" ref="dialogMiniJi2ImageRef" @click="playerFan(2)">
                                        <img :src="props.fan2ImageUrl" alt="" />
                                    </div>
                                    <div class="dialogMiniJiImage" ref="dialogMiniJi3ImageRef" @click="playerFan(3)">
                                        <img :src="props.fan3ImageUrl" alt="" />
                                    </div>
                                    <div class="dialogMiniJiImage" ref="dialogMiniJi4ImageRef" @click="playerFan(4)">
                                        <img :src="props.fan4ImageUrl" alt="" />
                                    </div>
                                    <div class="dialogMiniJiImage" ref="dialogMiniJi5ImageRef" @click="playerFan(5)">
                                        <img :src="props.fan5ImageUrl" alt="" />
                                    </div>
                                    <div class="dialogMiniJiImage" ref="dialogMiniJi6ImageRef" @click="playerFan(6)">
                                        <img :src="props.fan6ImageUrl" alt="" />
                                    </div>
                                    <div class="dialogMiniJiImage" ref="dialogMiniJi7ImageRef" @click="playerFan(7)">
                                        <img :src="props.fan7ImageUrl" alt="" />
                                    </div>
                                    <div class="dialogMiniJiImage" ref="dialogMiniJi8ImageRef" @click="playerFan(8)">
                                        <img :src="props.fan8ImageUrl" alt="" />
                                    </div>
                                    <div class="dialogMiniJiImage" ref="dialogMiniJi9ImageRef" @click="playerFan(9)">
                                        <img :src="props.fan9ImageUrl" alt="" />
                                    </div>
                                    <div class="dialogMiniJiImage" ref="dialogMiniJi10ImageRef" @click="playerFan(10)">
                                        <img :src="props.fan10ImageUrl" alt="" />
                                    </div>
                                    <div class="dialogMiniJiImage" ref="dialogMiniJi11ImageRef" @click="playerFan(11)">
                                        <img :src="props.fan11ImageUrl" alt="" />
                                    </div>
                                    <div class="dialogMiniJiImage" ref="dialogMiniJi12ImageRef" @click="playerFan(12)">
                                        <img :src="props.fan12ImageUrl" alt="" />
                                    </div>
                                    <div class="dialogMiniJiImage" ref="dialogMiniJi13ImageRef" @click="playerFan(13)">
                                        <img :src="props.fan13ImageUrl" alt="" />
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="dialogRight"><img src="../../public/icons/leftPoint.svg" alt="right" @click="rightBtn"/></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="funcBox">
            <div class="playerBtnImageBox">
                <img src="../../public/video/pause_white.svg" alt="" ref="playBtnImageRef" @click="player"/>
            </div>
            <div class="timeBox">{{ videoTimeNow }}/{{ videoTimeAll }}</div>
            <div class="proessBox" ref="pressBoxRef"  @mousedown="videoMouseDown">
                <div class="proess" ref="proessRef"></div>
            </div>
        </div>
    </div>
</template>

<style scoped>
.animeModel4All{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.animeModel4All img{
    width: 100%;
    height: 270%;
    z-index: 1;
    user-select: none;
}

.videoMasterBox{
    position: absolute;
    left: 0;
    top: 5%;
    width: 100%;
    height: 67%;
    display: flex;
    justify-content: center;
}
.videoMasterBox1{
    width: 45%;
    height: 100%;
    background: rgb(26,29,75);
    border-radius: 10px;
}
.videoMasterBox2{
    width: 100%;
    height: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.videoMasterBox3{
    width: 100%;
    height: 20%;
    display: flex;
    justify-content: center;
    /* align-items: center; */
}
.videoMaster{
    width: 95%;
    height: 92%;
    background: rgba(0, 0, 0, 1);
    border-radius: 10px;
}
.videoMaster video{
    width: 100%;
    height: 100%;
    border-radius: 10px;
}
.dialogMiniBox{
    width: 95%;
    height: 87%;
    background: rgba(255, 255, 255, 1);
    border-radius: 10px;
    display: flex;
}

.dialogLeft{
    width: 5%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;

}
.dialogLeft img{
    width: 100%;
    height: 100%;
    user-select: none;
    cursor: pointer;
}
.dialogMaster{
    width: 90%;
    height: 100%;
    align-items: center;
    overflow: hidden;
    transition: all 0.3s;
}
.dialogRight{
    width: 5%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}
.dialogRight img{
    width: 100%;
    height: 100%;
    user-select: none;
    transform: rotate(180deg);
    cursor: pointer;
}
.dialogMiniJiBox{
    width: 300%;
    height: 100%;
    display: flex;
    align-items: center;
    transition: all 0.3s;
}
.dialogMiniJiImageBox{
    width: 600%;
    height: 85%;
    display: flex;
    align-items: center;
    overflow: hidden;
}
.dialogMiniJiImage{
    width: 85%;
    height: 100%;
    border-radius: 10px;
    border: 2px solid #fff;
    transition: all 0.3s;
    cursor: pointer;
}
.dialogMiniJiImage:hover{
    border: 2px solid red;
}
.dialogMiniJiImage img{
    width: 100%;
    height: 100%;
    border-radius: 10px;
}
/*
视频功能键样式
 */
.funcBox{
    position: absolute;
    left: 28.6%;
    top: 48.5%;
    width: 42.8%;
    height: 8%;
    display: block;
    background: rgba(0, 0, 0, 0.5);
    border-bottom-left-radius: 10px;
}
.playerBtnImageBox{
    position: absolute;
    left: 1%;
    top: 25%;
    width: 5%;
    height: 50%;
    cursor: pointer;
    user-select: none;
}
.playerBtnImageBox img{
    width: 100%;
    height: 100%;
}
.timeBox{
    position: absolute;
    left: 10%;
    top: 35%;
    color: #fff;
}
/*
进度条样式
*/
.proessBox{
    position: absolute;
    left: 2%;
    top: 0;
    width: 95%;
    height: 5%;
    background-color: rgba(200, 200, 200, 0.5);
    border-radius: 10px;
    cursor: pointer;
}
.proess{
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background-color: skyblue;
}
</style>